<template>
	<div>
		<el-form-item
			label="题干"
			prop="questionTitle"
			:rules="{
				required: true,
				message: '请输入题干',
				trigger: ['blur', 'change']
			}"
		>
			<template>
				<el-input v-model.trim="questionForm.questionTitle" maxlength="2000">
					<i slot="suffix" @click="handleEdit(questionForm.questionTitle,'questionTitle')" class="el-icon-edit-outline icons" />
				</el-input>
			</template>
		</el-form-item>
		<!-- form表单使用 -->
		<el-form-item
			label="选项"
			required
			class="item-option"
		>
			<div class="options-group">
				<el-form-item
					v-for="(item, index) in questionForm.optionList"
					:key="item.key+item.optionSeq"
					:prop="'optionList.' + index"
					:rules="{
						required: true, validator:checkOption, trigger: ['blur', 'change']
					}"
				>
					<select-options
						:value="item"
						:index="index"
						:is-add="index===0"
						:is-del="index===questionForm.optionList.length-1 && index!=1"
						:max-length="500"
						@add="add"
						@del="del"
						@edit="handleEdit"
					/>
				</el-form-item>
			</div>
		</el-form-item>
		<base-edit-table
			:list="smallQuestionList"
			parent-type="C"
			:option-list="questionForm.optionList"
			:basic-info="basicInfo"
			:tag-info="tagInfo"
			@sub-change="subChange"
			@del-sub="deleteSub"
		/>
	</div>
</template>
<script src="./edit.mjs"></script>
<style scoped lang="less">
.options-group{
    flex: 1;
    display: flex;
    flex-direction: column;
    &>label{
      margin-right: 0;
    }
}
.options-item{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 10px;
}
.icons{
    cursor: pointer;
    font-size: 20px;
    margin-top: 7px;
}
.item-option{
    margin-bottom: 0;
}
/deep/.el-radio__label,
/deep/ .el-checkbox__label{
    display: flex;
    flex: 1;
}
</style>
